<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .mofang {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        margin: auto;
        right: 0;
        bottom: 0;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(45deg);
        transition: all 400s;
    }
    .mofang1 {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        margin: auto;
        right: 0;
        bottom: 0;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(45deg);
        transition: all 400s;
 
    }
    .box{
        width: 160px;
        height: 160px;
        font-size: 30px;
        position: absolute;
        color: white;
    }
    .box1{
        width: 320px;
        height: 320px;
        font-size: 30px;
        position: absolute;
        color: white;
       opacity: 0;
       transition: all 4s;
    }
    .bottmom{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.39),rgba(0, 0, 255, 0.336));
        transform: rotateX(90deg)translateZ(-80px);
    }
    .right{
        background-image: linear-gradient(to right, rgba(255, 251, 0, 0.527),rgba(30, 255, 0, 0.5));
        transform: rotateY(-90deg)translateZ(80px);
    }
    .after{
        background-image: linear-gradient(to right, rgba(0, 225, 255, 0.39),rgba(119, 0, 255, 0.479));
        transform: rotateZ(90deg) translateZ(-80px);
    }
    .top{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.726),rgba(255, 230, 0, 0.336));
        transform: rotateX(90deg)translateZ(80PX);
    }
    .left{
        background-image: linear-gradient(to right, rgba(0, 255, 21, 0.39),rgba(0, 174, 255, 0.336));
        transform: rotateY(90deg)translateZ(80px);
    }
    .front{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.39),rgba(0, 0, 255, 0.336));
        transform: rotateZ(90deg)translateZ(80px);
    }
    .mofang:hover{
        transform: rotateX(-30deg) rotateY(36000deg);
    }

    .you{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.39),rgba(0, 0, 255, 0.336));
        transform: rotateX(90deg)translateZ(-160px);
    }
    .hou{
        background-image: linear-gradient(to right, rgba(255, 251, 0, 0.527),rgba(30, 255, 0, 0.5));
        transform: rotateY(-90deg)translateZ(160px);
    }
    .qian{
        background-image: linear-gradient(to right, rgba(0, 225, 255, 0.39),rgba(119, 0, 255, 0.479));
        transform: rotateZ(90deg) translateZ(-160px);
    }
    .shang{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.726),rgba(255, 230, 0, 0.336));
        transform: rotateX(90deg)translateZ(160PX);
    }
    .zuo{
        background-image: linear-gradient(to right, rgba(0, 255, 21, 0.39),rgba(0, 174, 255, 0.336));
        transform: rotateY(90deg)translateZ(160px);
    }
    .xia{
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0.39),rgba(0, 0, 255, 0.336));
        transform: rotateZ(90deg)translateZ(160px);
    }
    .mofang1:hover{
        transform: rotateX(-30deg) rotateY(36000deg);
        opacity: 1;
    }
  .mofang1:hover+.mofang{
        transform: rotateX(-30deg) rotateY(36000deg);
  }
  .mofang1:hover .box1{
        opacity: 1;
        transition: all 4s;
    }
    .mofang1:hover .you{
        opacity: 1;
        transform: rotateX(90deg)translateZ(-300px);
    }
    .mofang1:hover .hou{
        opacity: 1;
        transform: rotateY(-90deg)translateZ(300px);
    }
    .mofang1:hover .qian{
        opacity: 1;
        transform: rotateZ(90deg) translateZ(-300px);
    }
    .mofang1:hover .shang{
        opacity: 1;
        transform: rotateX(90deg)translateZ(300PX);
    }
    .mofang1:hover .zuo{
        opacity: 1;
        transform: rotateY(90deg)translateZ(300px);
    }
    .mofang1:hover .xia{
        opacity: 1;
        transform: rotateZ(90deg)translateZ(300px);
    }
</style>

<body>
   
    <div class="mofang1" id="mofang1">
        <div class="box1 shang"></div>
        <div class="box1 xia"></div>
        <div class="box1 zuo"></div>
        <div class="box1 qian"></div>
        <div class="box1 hou"></div>
        <div class="box1 you"></div>
    </div>
    <div class="mofang" id="mofang">
        <div class="box after"></div>
        <div class="box top"></div>
        <div class="box left"></div>
        <div class="box front"></div>
        <div class="box right"></div>
        <div class="box bottmom"></div>
    </div>
</body>

</html>